<script setup lang="ts">
import {useListStore} from "@/stores/list";
import {storeToRefs} from "pinia";

const listStore = useListStore()
const {
  handleEditSubmit,
} = useListStore()

const {
  editFormRef,
  editFormModel,
  editFormRules,
  editDialogVisible,
  editIsFullscreen,
  editTooltipVisible,
  editBtnLoading,
} = storeToRefs(listStore)
</script>

<template>
  <el-dialog v-model="editDialogVisible" width="35%" :show-close="false" :fullscreen="editIsFullscreen" destroy-on-close
             draggable>
    <template #header="{close, titleId, titleClass}">
      <div flex justify-between>
        <h3 :id="titleId" :class="titleClass" select-none>编辑账号</h3>

        <div flex items-center>
          <el-tooltip :content="editIsFullscreen ? '还原' : '最大化'" :visible="editTooltipVisible">
            <el-button plain style="border: 0;" @click="editIsFullscreen = !editIsFullscreen"
                       @mouseenter="editTooltipVisible = true" @mouseleave="editTooltipVisible = false"
                       @mouseup="editTooltipVisible = false">
              <svg v-if="!editIsFullscreen" xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em"
                   viewBox="0 0 24 24">
                <path fill="currentColor"
                      d="M3 21v-5h2v3h3v2zm13 0v-2h3v-3h2v5zM3 8V3h5v2H5v3zm16 0V5h-3V3h5v5z"/>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                <path fill="currentColor"
                      d="M6 21v-3H3v-2h5v5zm10 0v-5h5v2h-3v3zM3 8V6h3V3h2v5zm13 0V3h2v3h3v2z"/>
              </svg>
            </el-button>
          </el-tooltip>

          <span ml--12px>
            <el-button @click="close" plain style="border: 0;">
              <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
                    <path fill="currentColor"
                          d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"/>
              </svg>
            </el-button>
          </span>
        </div>
      </div>
    </template>

    <template #default>
      <el-form ref="editFormRef" :model="editFormModel" :rules="editFormRules" label-width="auto">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="editFormModel.name" placeholder="请输入用户名" clearable/>
        </el-form-item>

        <el-form-item label="头像地址" prop="avatar">
          <el-input v-model="editFormModel.avatar" placeholder="请输入头像地址" clearable/>
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input v-model="editFormModel.address" placeholder="请输入地址" clearable/>
        </el-form-item>

        <el-form-item label="创建时间" prop="create_time">
          <el-date-picker v-model="editFormModel.create_time" type="datetime" placeholder="请输入创建时间"
                          format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
        </el-form-item>
      </el-form>
    </template>

    <template #footer>
      <el-button plain @click="editDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleEditSubmit(editFormRef, editFormModel)" :loading="editBtnLoading">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>